<template>
  <div>
    <p style="margin: 10px;">
      <el-button-group>
        <el-button
          size="mini"
          round
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="
        {
          addDrawerVisible = true;
          for (i in newEntityInfo) {
            newEntityInfo[i] = '';
          };
          newEntityInfo.enableStatus = true
        }
      "
        >
          新增
        </el-button>
        <el-button
          slot="title"
          size="mini"
          round
          type="primary"
          icon="el-icon-paperclip"
          @click="batchImport()
      "
        >
          新增导入
        </el-button>
      </el-button-group>
    </p>
    <el-table
      height='700px'
      :data="databaseInfo.vehicles"
      stripe
    >
      <el-table-column
        property="vehicleDriver.vehicleCode"
        label="车辆编号"
      />
      <el-table-column
        property="vehicleDriver.vehicleName"
        label="车辆别名"
      />
      <el-table-column
        property="desc"
        label="车体描述"
      >
        <template slot-scope="scope">
          <p>长∶{{ scope.row.vehicleDriver.length }}mm</p>
          <p>宽∶{{ scope.row.vehicleDriver.width }}mm</p>
          <p>高∶{{ scope.row.vehicleDriver.height }}mm</p>
          <p>重∶{{ scope.row.vehicleDriver.weight }}kg</p>
        </template>
      </el-table-column>
      <el-table-column
        property="speedStr"
        label="速度 mm/s"
      >
        <template slot-scope="scope">
          <p>载货∶{{ scope.row.vehicleDriver.cargoSpeed }}</p>
          <p>空车∶{{ scope.row.vehicleDriver.emptySpeed }}</p>
        </template>
      </el-table-column>
      <el-table-column
        property="vehicleDriver.remark"
        label="启用状态"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.vehicleDriver.enableStatus"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="80"
      >
        <template slot-scope="scope">
          <p>
            <el-button
              @click="deleteById(scope.row.vehicleDriver)"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </p>
          <p>
            <el-button
              @click="
                {
                  updateDrawerVisible = true;
                  entityInfo = scope.row;
                }
              "
              type="text"
              size="small"
            >编辑</el-button>
          </p>
          <p>
            <el-button
              @click="
                {
                  detailDrawerVisible = true;
                  showDetailHandler(scope.row);
                }
              "
              type="text"
              size="small"
            >详情</el-button>
          </p>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <!-- 车辆驱动新增页面  -->
    <el-drawer
      :visible.sync="addDrawerVisible"
      size="55%"
      :append-to-body="true"
      :with-header="false"
    >
      <div style="margin: 10px;">
        <el-button
          type="primary"
          size="mini"
          round
          icon="el-icon-edit"
          @click="insert(newEntityInfo)"
        >立即创建</el-button>
        <el-divider content-position="left"></el-divider>
        <el-form
          ref="newEntityInfo"
          :model="newEntityInfo"
          label-width="140px"
          size="small"
          :rules="rules"
          :inline="true"
        >
          <el-form-item
            label="车辆编号"
            prop="vehicleCode"
            required
          >
            <el-input v-model="newEntityInfo.vehicleCode"></el-input>
          </el-form-item>
          <el-form-item
            label="车辆别名"
            prop="vehicleName"
            required
          >
            <el-input v-model="newEntityInfo.vehicleName"></el-input>
          </el-form-item>
          <el-form-item
            label="空车速度(mm/s)"
            prop="emptySpeed"
            required
          >
            <el-input v-model="newEntityInfo.emptySpeed"></el-input>
          </el-form-item>
          <el-form-item
            label="带货速度(mm/s)"
            prop="cargoSpeed"
            required
          >
            <el-input v-model="newEntityInfo.cargoSpeed"></el-input>
          </el-form-item>
          <el-form-item
            label="车辆IP"
            prop="ip"
          >
            <el-input v-model="newEntityInfo.ip"></el-input>
          </el-form-item>
          <el-form-item label="充电桩">
            <el-select
              style="width: 167px;"
              multiple
              v-model="newEntityInfo.chargingPiles"
              placeholder="请选择"
            >
              <el-option
                v-for="item in databaseInfo.chargeNodes"
                :key="item.nodeCode"
                :label="item.nodeName"
                :value="item.nodeCode"
              >
                <span style="float: left">{{ item.nodeCode }} </span>
                <span style="width: 10px;float: left;"> </span>
                <span style="float: right; color: #8492a6; font-size: 6px"> {{ item.nodeName }} </span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="激光方案"
            prop="laserId"
            required
          >
            <el-select
              style="width: 167px;"
              v-model="newEntityInfo.laserId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in databaseInfo.laserInfos"
                :key="item.id"
                :label="item.remark"
                :value="item.id"
              >
                <span style="float: left">{{ item.remark }} </span>
                <span style="width: 10px;float: left;"> </span>
                <span style="float: right; color: #8492a6; font-size: 6px"> 停{{ item.suspendUp }} {{ item.suspendDown }} {{ item.suspendLeft }} {{ item.suspendRight }} 减{{ item.decelerateUp }} {{ item.decelerateDown }} {{ item.decelerateLeft }} {{ item.decelerateRight }} </span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="车长(mm)"
            prop="length"
          >
            <el-input v-model="newEntityInfo.length"></el-input>
          </el-form-item>
          <el-form-item
            label="车宽(mm)"
            prop="width"
          >
            <el-input v-model="newEntityInfo.width"></el-input>
          </el-form-item>
          <el-form-item
            label="车高(mm)"
            prop="height"
          >
            <el-input v-model="newEntityInfo.height"></el-input>
          </el-form-item>
          <el-form-item
            label="载重(kg)"
            prop="weight"
          >
            <el-input v-model="newEntityInfo.weight"></el-input>
          </el-form-item>
          <el-form-item
            label="品牌"
            prop="brand"
          >
            <el-input v-model="newEntityInfo.brand"></el-input>
          </el-form-item>
          <el-form-item
            label="系统驱动版本"
            prop="systemVersion"
          >
            <el-input v-model="newEntityInfo.systemVersion"></el-input>
          </el-form-item>
          <el-form-item
            label="备注"
            prop="remark"
          >
            <el-input v-model="newEntityInfo.remark"></el-input>
          </el-form-item>
          <el-form-item
            label="启用状态"
            prop="enableStatus"
          >
            <el-switch v-model="newEntityInfo.enableStatus">
            </el-switch>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <!-- 车辆驱动编辑 -->
    <el-drawer
      :visible.sync="updateDrawerVisible"
      size="55%"
      :append-to-body="true"
      :with-header="false"
    >
      <div style="margin: 10px;">
        <el-button
          type="primary"
          slot="title"
          size="mini"
          round
          icon="el-icon-document-checked"
          @click="updateById(entityInfo)"
        >
          保存修改
        </el-button>
        <el-form
          ref="entityInfo"
          :model="entityInfo"
          label-width="80px"
          size="small"
          :rules="rules"
          :inline="true"
        >
          <el-divider content-position="left">暂停区 单位：mm</el-divider>
          <el-form-item
            label="上"
            prop="suspendUp"
          >
            <el-input v-model="entityInfo.suspendUp"></el-input>
          </el-form-item>
          <el-form-item
            label="下"
            prop="suspendDown"
          >
            <el-input v-model="entityInfo.suspendDown"></el-input>
          </el-form-item>
          <el-form-item
            label="左"
            prop="suspendLeft"
          >
            <el-input v-model="entityInfo.suspendLeft"></el-input>
          </el-form-item>
          <el-form-item
            label="右"
            prop="suspendRight"
          >
            <el-input v-model="entityInfo.suspendRight"></el-input>
          </el-form-item>
          <el-divider content-position="left">减速区 单位：mm</el-divider>
          <el-form-item
            label="上"
            prop="decelerateUp"
          >
            <el-input v-model="entityInfo.decelerateUp"></el-input>
          </el-form-item>
          <el-form-item
            label="下"
            prop="decelerateDown"
          >
            <el-input v-model="entityInfo.decelerateDown"></el-input>
          </el-form-item>
          <el-form-item
            label="左"
            prop="decelerateLeft"
          >
            <el-input v-model="entityInfo.decelerateLeft"></el-input>
          </el-form-item>
          <el-form-item
            label="右"
            prop="decelerateRight"
          >
            <el-input v-model="entityInfo.decelerateRight"></el-input>
          </el-form-item>
          <el-form-item
            label="备注"
            prop="remark"
          >
            <el-input v-model="entityInfo.remark"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <!-- 车辆驱动详情 -->
    <el-drawer
      :visible.sync="detailDrawerVisible"
      size="55%"
      :append-to-body="true"
      :with-header="false"
    >
      <el-scrollbar style="width: 100%; height: 100%">
        <el-form
          style="margin: 10px;"
          ref="entityInfo"
          :model="entityInfo"
          label-width="150px"
          size="small"
          :rules="rules"
        >
          <el-form-item label="车辆∶">
            <el-button size="small">{{ entityInfo.vehicleDriver.vehicleCode }}
            </el-button>
          </el-form-item>
          <el-form-item label="别名∶">
            <el-button size="small">{{ entityInfo.vehicleDriver.vehicleName }}
            </el-button>
          </el-form-item>
          <el-form-item label="车辆IP：">
            <el-button size="small">{{ entityInfo.vehicleDriver.ip }}
            </el-button>
          </el-form-item>
          <el-form-item
            v-if="entityInfo.laserInfo != null"
            label="激光方案id："
          >
            <el-button size="small">
              {{ entityInfo.vehicleDriver.laserId }}
            </el-button>
          </el-form-item>
          <el-form-item
            v-if="entityInfo.laserInfo != null"
            label="激光方案暂停区："
          >
            <el-button size="small">上 {{ entityInfo.laserInfo.suspendUp }}mm
            </el-button>
            <el-button size="small">下 {{ entityInfo.laserInfo.suspendDown }}mm
            </el-button>
            <el-button size="small">左 {{ entityInfo.laserInfo.suspendLeft }}mm
            </el-button>
            <el-button size="small">右 {{ entityInfo.laserInfo.suspendRight }}mm
            </el-button>
          </el-form-item>
          <el-form-item
            v-if="entityInfo.laserInfo != null"
            label="激光方案减速区："
          >
            <el-button size="small">上 {{ entityInfo.laserInfo.decelerateUp }}mm
            </el-button>
            <el-button size="small">下 {{ entityInfo.laserInfo.decelerateDown }}mm
            </el-button>
            <el-button size="small">左 {{ entityInfo.laserInfo.decelerateLeft }}mm
            </el-button>
            <el-button size="small">右 {{ entityInfo.laserInfo.decelerateRight }}mm
            </el-button>
          </el-form-item>

          <el-form-item label="速度∶">
            <el-button size="small">空车：{{ entityInfo.vehicleDriver.emptySpeed }}mm/s </el-button>
            <el-button size="small">载货：{{ entityInfo.vehicleDriver.cargoSpeed }}mm/s
            </el-button>
          </el-form-item>
          <el-form-item label="车体描述∶">
            <el-button size="mini">长：{{ entityInfo.vehicleDriver.length }}mm</el-button>
            <el-button size="mini">宽：{{ entityInfo.vehicleDriver.width }}mm</el-button>
            <el-button size="mini">高：{{ entityInfo.vehicleDriver.height }}mm</el-button>
            <el-button size="mini">载重：{{ entityInfo.vehicleDriver.weight }}kg</el-button>
          </el-form-item>
          <el-form-item label="充电桩编号：">
            <span
              style="padding-right: 14px"
              v-for="item in entityInfo.vehicleDriver.chargingPiles.split(',')"
              :key="item"
            >
              <el-button size="small"> {{ item }}</el-button>
            </span>
          </el-form-item>
          <el-form-item label="系统驱动版本">
            <el-button size="small">{{ entityInfo.vehicleDriver.systemVersion }}
            </el-button>
          </el-form-item>
          <el-form-item label="品牌">
            <el-button size="small">{{ entityInfo.vehicleDriver.brand }}
            </el-button>
          </el-form-item>
          <el-form-item label="备注">
            <el-button size="small">{{ entityInfo.vehicleDriver.remark }}
            </el-button>
          </el-form-item>
          <el-form-item label="启用状态">
            <el-switch
              v-model="entityInfo.vehicleDriver.enableStatus"
              disabled
            />
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<script>
import api from "@/utils/api";
export default {
  name: "Vehicle",
  props: ["databaseInfo"],
  data() {
    return {
      addDrawerVisible: false,
      updateDrawerVisible: false,
      detailDrawerVisible: false,
      entityInfo: {
        vehicleDriver: {
          brand: "",
          cargoSpeed: "",
          chargeStrategyId: "",
          chargingPiles: "",
          emptySpeed: "",
          enableStatus: "",
          height: "",
          ip: "",
          laserId: "",
          length: "",
          remark: "",
          systemVersion: "",
          vehicleCode: "",
          vehicleName: "",
          weight: "",
          width: "",
        },
      },
      newEntityInfo: {
        vehicleDriver: {
          brand: "",
          cargoSpeed: "",
          chargeStrategyId: "",
          chargingPiles: "",
          emptySpeed: "",
          enableStatus: "",
          height: "",
          ip: "",
          laserId: "",
          length: "",
          remark: "",
          systemVersion: "",
          vehicleCode: "",
          vehicleName: "",
          weight: "",
          width: "",
        },
      },
      rules: {
        vehicleCode: [
          { required: true, message: "请输入车辆编号", trigger: "blur" },
        ],
        vehicleName: [
          { required: true, message: "请输入车辆别名", trigger: "blur" },
        ],
        emptySpeed: [
          { required: true, message: "请输入空车速度", trigger: "blur" },
        ],
        cargoSpeed: [
          { required: true, message: "请输入带货速度", trigger: "blur" },
        ],
        laserId: [{ required: true, message: "请选择激光策略" }],
        remark: [
          {
            min: 1,
            max: 255,
            message: "长度在 1 到 255 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    batchImport() {
      this.$alert(`开发中...`, {
        dangerouslyUseHTMLString: true,
      });
    },
    showDetailHandler(row) {
      this.entityInfo = row;
      console.log(row);
    },
    // 删除
    deleteById(entity) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          api.vehicleDriverDeleteById(entity).then(() => {
            this.$message({
              message: "删除车辆驱动成功！",
              type: "success",
            });
            this.$emit("getAllDataBaseInfo");
          });
        })
        .catch((e) => e);
    },
    // 新增
    insert(entity) {
      this.$refs["newEntityInfo"].validate((valid) => {
        if (valid) {
          entity.chargingPiles = entity.chargingPiles.toString();
          api
            .vehicleDriverInsert(entity)
            .then(() => {
              this.addDrawerVisible = false;
              this.$message({
                message: "新增车辆驱动成功！",
                type: "success",
              });
              this.$emit("getAllDataBaseInfo");
            })
            .catch(() => {
              this.$message({
                message: "新增车辆驱动失败！",
                type: "error",
              });
            });
        }
      });
    },
    // 更新
    updateById(entity) {
      this.$refs["entityInfo"].validate((valid) => {
        if (valid) {
          api
            .laserInfoUpdateById(entity)
            .then(() => {
              this.updateDrawerVisible = false;
              this.$message({
                message: "更新车辆驱动成功！",
                type: "success",
              });
              this.$emit("getAllDataBaseInfo");
            })
            .catch(() => {
              this.$message({
                message: "更新车辆驱动失败！",
                type: "error",
              });
            });
        }
      });
    },
  },
};
</script>

<style>
</style>